/**
 * Created by rongyao on 2017/11/14.
 */
import React from 'react'
import {Link} from 'react-router'
import {Provider, connect} from 'react-redux'
import {fetchNews,fetchCate,fetchIds} from '../../actions/counter'
import "./news.scss"

class News extends React.Component{
	componentWillMount(){
		this.props.fetchCate(1);
		this.props.fetchNews();
	}
	
	render(){
		function handlerPageLinkClick(e){
			var page = e.target.getAttribute('id');
			fetchNews(page);
		}
		function search(e) {
			// console.log(111);
			var keyWords = $('#inp').val();
			// console.log(keyWords);
			fetchNews(1,keyWords);
		}
		
		function searchCateNews(e) {
			var index = e.target.getAttribute("data-num")-0;
			fetchIds(cateList[index]._id,1);
		}
		
		function showDetail(e){
			var index = e.target.getAttribute("data-num")-0;
		}
		
		var {newsList,cateList,fetchNews,fetchIds} = this.props;
		// console.log(cateList);
		var cate = cateList.map(function (val, idx) {
			return <li data-num={idx} key={idx} onClick={searchCateNews}>{val.title}</li>
		})
		
		if(newsList.rows&&newsList.rows.length>0){
			var listsLen = newsList.rows.length;
			var pageList =[];
			var pageListContent;
			var showData = [];
			// console.log(newsList);
			if(newsList.rows){
				var rowList=[];
				for (var i = 0; i < newsList.rows.length; i++) {
					var lujin = "http://localhost:3000/"+newsList.rows[i].pic.filename;
					if(i%2!=0){
						rowList.push(<div className="row featurette">
							<div className="col-md-7">
								<h2 className="featurette-heading">{newsList.rows[i].title}</h2>
								<p style={{fontSize:'18px'}}>{newsList.rows[i].content}</p>
								<p><Link to={`/newsDetail/${i}`} className="btn btn-default" role="button">View details &raquo;</Link></p>
							</div>
							<div className="col-md-5">
								<img className="featurette-image img-responsive center-block" src={lujin} alt="Generic placeholder image" style={{width:"300px",height:'300px'}}/>
							</div>
						</div>)
					}else{
						rowList.push(<div className="row featurette">
							<div className="col-md-5">
								<img className="featurette-image img-responsive center-block" src={lujin} alt="Generic placeholder image" style={{width:"300px",height:'300px'}}/>
							</div>
							<div className="col-md-7">
					 			<h2 className="featurette-heading">{newsList.rows[i].title}</h2>
								<p style={{fontSize:'18px'}}>{newsList.rows[i].content}</p>
								<p><Link to={`/newsDetail/${i}`} className="btn btn-default" href="javascript:void(0)" role="button">View details &raquo;</Link></p>
							</div>
						</div>)
					}
				}
				
				
				showData = rowList;
				
				// 列表分页处理
				var pageMaxSize = Math.ceil(newsList.total/5);
				console.log(newsList.total,pageMaxSize);
				for (var i = 1; i < pageMaxSize; i++) {
					pageList.push(
						<li key={i}><a href="javascript:void(0)" onClick={handlerPageLinkClick}  id={i}>{i}</a></li>
					)
				};
				pageListContent = (
					<nav style={{textAlign:'center'}}>
						<ul className="pagination">
							{pageList}
						</ul>
					</nav>
				)
			}
		}
		
		
		
		return (
			<div className="con container">
				<div className="row">
					<div className="cate col-md-2">
						<ul className="cateUl">
							{cate}
						</ul>
					</div>
					
					<div className="col-md-10">
						<div className="row">
							<div className="col-lg-12">
								<div className="input-group">
      <span className="input-group-btn">
        <button className="btn btn-default" type="button" onClick={search}>Go!</button>
      </span>
									<input id="inp" type="text" className="form-control" placeholder="Search for..."/>
								</div>
							</div>
						</div>
						<div>
							{rowList}
						</div>
					</div>
				</div>
				{pageListContent}
			</div>
		)
	}
}

const getValue = (state) => {
	return {
		value: state.count,
		newsList: state.newsList,
		cateList: state.cateList
	}
}
const NewsContext = connect(
	getValue,
	{fetchNews,fetchCate,fetchIds}
)(News)
module.exports=NewsContext;